<template>
  <div class="lyric_box">
    <ul :style="{ transform: `translateY(${(offset_num - 1) * -5}vh)` }">
      <li
        v-for="(item, index) in song_lyric"
        :key="index"
        :class="offset_num == index ? 'act_ly' : ''"
      >
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      offset_num: 0,
    };
  },
  methods: {
    reset_num(val) {
      let time_arr = this.song._lyric.map((el) => Math.abs(val - el.timestamp));
      let min = Math.min(...time_arr);
      let min_idx = time_arr.indexof(min);
      this.offset_num = min_idx;
    },
  },
  computed: {
    ...mapState({ song_lyric: "song_lyric", aud_info: "current_song_info" }),
  },
  watch: {
    aud_info: {
      immediate: true,
      handler(val) {
        let idx = this.song_lyric.findIndex((el) => {
          return el.timestamp == val.current_time;
        });
        if (idx != "-1") {
          console.log(idx);
          this.offset_num = idx;
        }
      },
    },
  },
  created() {
    // 在歌词组件内监听 bus 的drag_end事件，表示拖拽结束

    this.$bus.$on("drag_end", this.reset_num);
  },
};
</script>

<style lang="scss" scoped>
.lyric_box {
  text-align: center;
  overflow: hidden;
  width: 85%;
  position: fixed;
  height: 15vh;
  top: 54%;

  display: flex;
  justify-content: center;
  ul {
    transition: all 0.3s;
    li {
      height: 5vh;
      line-height: 5vh;
      color: lightgrey;
    }
    .act_ly {
      color: white;
      transform: scale(1.3);
    }
  }
}
</style>
